//钱包身体
import React, { Component } from 'react'
import {
    View,
    Text,
    TouchableOpacity,
    Image,
} from 'react-native';

import { walletStyle as styles } from '../../../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;




export default class Wallet_pbody extends Component {
    constructor(props) {
        super(props);
        this.state = { sex: 0 };
    };

    render() {
        return (
            <View style={styles.wal_body}>
                <View style={{ width: width * 1 }}>

                    <View style={styles.wal_ptop}>
                        <Text style={styles.wal_pt1}>您需要支付</Text>
                        <Text style={styles.wal_pt2}> 1.00元</Text>
                    </View>

                    {/* 微信 */}
                    <View style={styles.wal_weixin}>
                        <View style={styles.wal_weilef}>
                            <Image source={require('../../../../img/app/weixin.png')} style={styles.weiimg} />
                            <View style={[styles.wal_weicen, { width: width * 0.6 }]}>
                                <Text style={styles.wal_weict1}>微信支付</Text>
                                <Text style={styles.wal_weict2}>推荐使用微信5.0以上版本</Text>
                            </View>
                        </View>

                        {/* 选中小对号 */}
                        <View style={styles.wal_weirig}>
                            <TouchableOpacity style={styles.rsk} activeOpacity={1} onPress={() => { this.choose(1) }}>
                                {this.state.sex == 1 ? <Text style={styles.rsk2}>
                                    <Icon
                                        name={'md-checkmark'}
                                        size={15}
                                        color={'#fff'} style={styles.icone} />
                                </Text> : <Text></Text>}
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 支付宝 */}
                    <View style={styles.wal_weixin}>
                        <View style={styles.wal_weilef}>
                            <Image source={require('../../../../img/app/zhifubao.png')} style={styles.weiimg} />
                            <View style={[styles.wal_weicen, { width: width * 0.6 }]}>
                                <Text style={styles.wal_weict1}>支付宝支付</Text>
                                <Text style={styles.wal_weict2}>推荐有支付宝账号的用户使用</Text>
                            </View>
                        </View>

                        {/* 选中小对号 */}
                        <View style={styles.wal_weirig}>
                            <TouchableOpacity style={styles.rsk} activeOpacity={1} onPress={() => { this.choose(2) }}>
                                {this.state.sex == 2 ? <Text style={styles.rsk2}>
                                    <Icon
                                        name={'md-checkmark'}
                                        size={15}
                                        color={'#fff'} />
                                </Text> : <Text></Text>}
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 余额 */}
                    <View style={styles.wal_weixin}>
                        <View style={styles.wal_weilef}>
                            <Image source={require('../../../../img/app/add.png')} style={styles.weiimg2} />
                            <View style={[styles.wal_weicen, { width: width * 0.6 }]}>
                                <Text style={styles.wal_weict1}>使用个人账户余额支付</Text>
                                <Text style={styles.wal_weict2}>余额不足无法支付</Text>
                            </View>
                        </View>

                        {/* 选中小对号 */}
                        <View style={styles.wal_weirig}>
                            <TouchableOpacity style={styles.rsk} activeOpacity={1} onPress={() => { this.choose(3) }}>
                                {this.state.sex == 3 ? <Text style={styles.rsk2}>
                                    <Icon
                                        name={'md-checkmark'}
                                        size={15}
                                        color={'#fff'} style={styles.icone} />
                                </Text> : <Text></Text>}
                            </TouchableOpacity>
                        </View>
                    </View>

                    <Text style={styles.wal_weict3}>付费即表示同意<Text style={{ color: '#3d9ccc' }}>《先知增值服务协议》</Text></Text>
                </View>

                {/* 支付按钮 */}
                <TouchableOpacity onPress={() => { }} activeOpacity={1}
                    style={[styles.button, { width: width * 0.9 }]}>
                    <Text style={styles.buttonin}>支付</Text>
                </TouchableOpacity>

            </View>
        )
    }
    choose(a) {
        this.setState({
            sex: a
        })
    }
}